<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>第二篇</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    组件注册语法糖
    使用Vue.component()直接创建和注册组件
    <div id="demo1">
    	<my-component1></my-component1>	
    </div>
    <hr>
    在选项对象的components属性中实现局部注册
    <div id="demo2">
    	<my-component2></my-component2>	
    	<my-component3></my-component3>	
    </div>
	<hr>
	模板分离
	<div id="demo3">
		<my-component5></my-component5>	
    	<my-component6></my-component6>
	</div>
	<hr>
	使用props
	
	<hr>
	<hr>
	<hr>
	<script type="text/x-template" id="demo5">
		<h1>我是爽口大青椒5</h1>
	</script>
	<template id="demo6">
		<h1>我是爽口大青椒6</h1>
	</template>

	<script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">

    //=========================================
    Vue.component("my-component1",{
    	template:"<h1>我是爽口大青椒</h1>"
    })
    new Vue({
    	el:"#demo1",
    })
    new Vue({
    	el:"#demo2",
    	components:{
    		"my-component2":{
    			template:"<h1>我是爽口大青椒2</h1>"
    		},
    		"my-component3":{
    			template:"<h1>我是爽口大青椒3</h1>"
    		},
    	}
    })

    Vue.component("my-component5",{
    	template:"#demo5"
    })
   
    new Vue({
    	el:"#demo3",
    	components:{
    		"my-component6":{
    			template:"#demo6"
    		}
    	}
    })
   
     </script>
   
</body>

</html>